<template>
  <view class="express-personnel-wrap">
    <view
      v-for="(item, index) in list"
      :key="index"
      class="express-personnel-item"
      @click="handleSelectExpressMan(item)"
    >
      <view class="left-info">
        <view class="avatar-statue-wrap">
          <image :src="ftp + item.avatar" class="avatar"></image>
          <view class="status">{{
            item.work_type === 1 ? "工作中" : "休息中"
          }}</view>
        </view>

        <view class="express-personnel-info">
          <view class="name-wrap">
            <view class="name">{{ item.entity_name }}</view>
            <view class="tag">
              <uni-tag text="已认证" type="primary" size="small"></uni-tag>
            </view>
          </view>

          <view class="single-quantity">完成{{ item.order_num }}单</view>

          <view class="number">合作{{ item.cooperate_num }}次</view>
        </view>
      </view>

      <view class="right-wrap">
        <view class="select-icon">
          <uni-icons
            v-if="parseInt(selectedId) === parseInt(item.express_id)"
            type="checkmarkempty"
            size="24"
            color="#09bb07"
          ></uni-icons>
        </view>

        <view class="distance">
          <uni-icons
            type="map-pin-ellipse"
            size="18"
            color="#B0B0B0"
          ></uni-icons>
          <view class="text">{{ item.last_location.range_num }}km</view>
        </view>
      </view>
    </view>

    <view v-if="!list.length" class="no-data">
      <van-empty description="暂无数据" />
    </view>

    <van-dialog id="van-dialog" />
    <van-toast id="van-toast" />
  </view>
</template>

<script>
const app = getApp();
import Toast from "wxcomponents/vant/toast/toast";
import Auth from "@/common/permission/index.js";

export default {
  data() {
    return {
      selectedId: "",
      ftp: app.globalData.ftp,
      latitude: "",
      longitude: "",
      list: [],
    };
  },
  methods: {
    handleSelectExpressMan(item) {
      const eventChannel = this.getOpenerEventChannel();

      if (parseInt(item.express_id) === parseInt(this.selectedId)) {
        item = {};
      }
      console.log(item);
      eventChannel.emit("selectExpressMan", {
        ...item,
      });
      uni.navigateBack();
    },
    handleGetExpressManList() {
      app
        .request(
          {
            lat: this.latitude,
            lnt: this.longitude,
          },
          "/api/logistics/terminal/search_express"
        )
        .then((res) => {
          console.log(res);
          const { code, msg, data } = res;
          if (code === 1) {
            this.list = data || [];
          } else {
            Toast(msg);
          }
        });
    },
    async handleGetGps() {
      const that = this;
      let authState = await new Auth("userLocation").check();
      authState &&
        uni.getLocation({
          type: "wgs84",
          success(res) {
            const { latitude, longitude } = res;
            that.latitude = latitude;
            that.longitude = longitude;
            app.globalData.latitude = latitude;
            app.globalData.longitude = longitude;
            that.handleGetExpressManList();
          },
          fail(res) {},
        });
    },
  },
  onLoad(res) {
    const { id } = res;
    this.selectedId = id;
    if (app.globalData.latitude) {
      this.latitude = app.globalData.latitude;
      this.longitude = app.globalData.longitude;
      this.handleGetExpressManList();
    } else {
      this.handleGetGps();
    }
  },
  onShow() {
    const KEY_FIRST_ENTER = "firstKey2";
    const firstKey = uni.getStorageSync(KEY_FIRST_ENTER);
    if (!firstKey) {
      // 如果没有找到标志，则表示是第一次进入
      uni.setStorageSync(KEY_FIRST_ENTER, true); // 设置标志，标记已进入过
      console.log(1111111)
    } else {
      console.log(22222)
      this.handleGetGps();
    }
  },
};
</script>

<style lang="scss">
.express-personnel-wrap {
  min-height: 100vh;
  background-color: #f2f2f2;

  .express-personnel-item {
    width: 100%;
    padding: 24rpx;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    background-color: #fff;
    margin-bottom: 22rpx;
    .left-info {
      display: flex;
      .avatar-statue-wrap {
        margin-right: 24rpx;
        .avatar {
          width: 70rpx;
          height: 70rpx;
          border-radius: 50%;
        }
        .status {
          color: #f8970c;
          font-size: 24rpx;
        }
      }

      .express-personnel-info {
        .name-wrap {
          display: flex;
          align-items: center;
          .name {
            font-size: 28rpx;
            margin-right: 22rpx;
            color: #666666;
          }
          .tag {
          }
        }

        .single-quantity {
          font-size: 22rpx;
          color: #adadad;
          margin-bottom: 10rpx;
          margin-top: 10rpx;
        }

        .number {
          font-size: 22rpx;
          color: #adadad;
        }
      }
    }

    .right-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      height: 112rpx;
      .select-icon {
        margin-top: 26rpx;
        margin-left: 18rpx;
      }

      .distance {
        display: flex;
        align-items: center;
        font-size: 22rpx;

        .text {
          color: #b0b0b0;
        }
      }
    }
  }
}
</style>
